<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name">昵称</span>
            <span class="value">
                {{userInfo.nickName}}
            </span>
          </div>
          <div class="item h100">
            <span class="name">头像</span>
            <span class="value pics publicitypic">
                 <el-image :src="userInfo.headPortrait" style="width:80px;height:80px" />
            </span>
          </div>
          <div class="item">
            <span class="name">手机</span>
            <span class="value">
                {{userInfo.phone}}
            </span>
          </div>
          <div class="item">
            <span class="name">角色</span>
            <span class="value">
                {{userInfo.userRole | parseUserRole}}
            </span>
          </div>
          <div class="item">
            <span class="name">性别</span>
            <span class="value">
                {{userInfo.gender | parseUserGender}}
            </span>
          </div>
          <div class="item">
            <span class="name">签名</span>
            <span class="value">
                {{userInfo.describe}}
            </span>
          </div>
          <div class="item">
            <span class="name">注册时间</span>
            <span class="value">
                {{userInfo.createTime | parseTime}}
            </span>
          </div>
          <div class="item">
            <span class="name">注册IP</span>
            <span class="value">
                {{userInfo.registerIp}}
            </span>
          </div>
          <div class="item">
            <span class="name">最后登录</span>
            <span class="value">
                {{userInfo.lastLoginTime | parseTime}}
            </span>
          </div>
          <div class="item h100">
            <span class="name">第三方信息</span>
            <span class="value">
                <table style="width:100%" class="table">
                    <tr><th>第三方</th><th>OpenId</th><th>AppId/UnionId</th><th>操作</th></tr>
                    <tr><td>微信</td><td>{{userInfo.weiXinOpenId}}</td><td>{{userInfo.weiXinUnionId}}</td><td></td></tr>
                    <tr><td>微信小程序</td><td>{{userInfo.weiXinOpenId}}</td><td>{{userInfo.microAppOpenId}}</td><td></td></tr>
                    <tr><td>支付宝</td><td>{{userInfo.aliOpenUserId}}</td><td>{{userInfo.aliPayUserId}}</td><td></td></tr>
                </table>
            </span>
          </div>
          
          <div class="item">
            <span class="name"></span>
            <span class="value">
             
            </span>
          </div>
          <!--- end -->
      </div>
  </div>
</template>

<script>
import path from 'path'
import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as userApi from '@/api/user'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'



export default {
  name:'UserDetails',
  components: {
  },
  data() {
    return {
      saveloading:false,
      userInfo:{
        id:guid.empty,
        nickName:'',
        aliOpenUserId:'',
        aliPayUserId:'',
        microAppOpenId:'',
        createTime:'',
        describe:'',
        gender:'',
        headPortrait:'',
        lastLoginTime:'',
        phone:'',
        gender:'',
        registerIp:'',
        userRole:'',
        weiXinOpenId:'',
        weiXinUnionId:'',
        
      },
      
    }
  },
  computed: {
    
  },

  filters:{
    parseUserRole(val){
      return enumHelper.user.userRole.getName(val);
    },
    parseUserGender(val){
      return ['-','男','女'][val];
    }
  },
  created() {
    var that=this;
    const id = that.$route.params && that.$route.params.id
    const token=auth.getToken();

    if(id && id!='0'){
      userApi.getUserInfo({id:id}).then(res=>{
         if(res.data){
            for(var key in res.data){
                if(res.data.hasOwnProperty(key)){
                    that.userInfo[key]=res.data[key];
                }
            }
            console.log(that.userInfo)
         }
      });
    }

    
  },
  methods: {

  }
}
</script>

<style scoped>
table.table{ table-layout: fixed;}
table.table>tr>th{color:#666;font-size:14px; font-weight: normal;}
 table.table>tr:nth-child(1){
    background: #e1e1e1;
 }
 table.table>tr:nth-child(2n){
    background: #f1f1f1;
 }
 table.table>tr>td{text-align: center;}
</style>
